<template>
	<view class="conent">
		<!-- <u-navbar :title="navbarTitle" autoBack>
		</u-navbar> -->
		<view class="conent_box">
			<view class="nav">
				<u-grid :border="false" col="5">
					<u-grid-item v-for="(item,index) in navList" :key="index" @click="switchoverStatus(item.status)">
						<u--text :text="item.title" align="center" size="16" lineHeight="40"
							:color="orderStatus==item.status?'#78d9cb':'#aaaaaa'"></u--text>
						<view v-show="orderStatus==item.status"
							style="position: absolute;top: 50rpx; width: 40rpx;border: 4rpx solid #78d9cb; background-color: #78d9cb;">
						</view>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>

			<view class="goodsList" v-if="goodsList.length>0">
				<view class="item" v-for="(item, index) in goodsList" :key="index">
					<u-row customStyle="margin-top: 10rpx;">
						<u-col span="6">
							<u--text :text="item.createTime" size="14" bold color="#999999"></u--text>
						</u-col>
						<u-col span="6">
							<u--text
								:text="item.evaluateFlag=='1'?'已完成':item.orderStatus=='0'?'待付款':item.orderStatus=='1'?'待发货':item.orderStatus=='2'?'待收货':item.orderStatus=='3'?'待评价':''"
								size="14" bold align="right" color="#fd9472"></u--text>
						</u-col>
					</u-row>
					<u-row customStyle="margin: 10rpx;border-bottom:4rpx solid #fafafa;"
						v-for="(items, indexs) in item.items" :key="indexs" @click="evaluate(item)">
						<u-col span="4">
							<u--image :src="items.goodsImage" width="80px" height="80px" radius="10"></u--image>
						</u-col>
						<u-col span="8">
							<u-row>
								<u-col span="8">
									<u--text :text="items.goodsName" size="14" bold align="left"
										color="#000000"></u--text>
								</u-col>
								<u-col span="4">
									<u--text :text="items.price" size="14" bold mode="price" align="right"
										color="#000000"></u--text>
								</u-col>
							</u-row>
							<view style="height:40rpx"></view>
							<u--text :text="'数量'+items.quantity" size="14" bold align="left" color="#999999"></u--text>
						</u-col>
					</u-row>
					<u-row customStyle="margin-left:250rpx;">
						<u-col span="4">
							<u--text :text="'共计'+item.items.length +'件商品'" size="14" bold align="left"
								color="#000000"></u--text>
						</u-col>
						<u-col span="4">
							<u--text text="应付金额:" size="14" bold align="right" color="#000000"></u--text>
						</u-col>
						<u-col span="4">
							<u--text :text="item.totalAmout" size="14" bold mode="price" align="right"
								color="#fd9472"></u--text>
						</u-col>
					</u-row>
					<u-row customStyle="margin-top:20rpx;margin-left:250rpx;">
						<u-col customStyle="padding:10rpx;" span="6"
							v-if="item.orderStatus=='1'||item.orderStatus=='2'||item.orderStatus=='3'">
							<u-button text="再次购买" color="#333" plain size="normal" @click="againPay(item)"
								customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
						</u-col>
						<u-col customStyle="padding:10rpx;" span="6" v-if="item.orderStatus=='0'">
							<u-button text="取消订单" color="#333" plain size="normal" @click="cancelOrder(item)"
								customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
						</u-col>
						<u-col customStyle="padding:10rpx;" span="6" v-if="item.orderStatus=='0'">
							<u-button text="立即付款" color="#fd9472" plain size="normal" @click="pay(item)"
								customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
						</u-col>
						<u-col customStyle="padding:10rpx;" span="6"
							v-if="item.orderStatus=='1'||item.orderStatus=='2'||(item.orderStatus=='3'&&item.evaluateFlag=='1')">
							<u-button text="查看详情" color="#fd9472" plain size="normal" @click="orderDetails(item)"
								customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
						</u-col>
						<u-col customStyle="padding:10rpx;" span="6"
							v-if="item.orderStatus=='3'&&item.evaluateFlag!='1'">
							<u-button text="评价" color="#fd9472" plain size="normal" @click="evaluate(item)"
								customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
						</u-col>
						<!-- <u-col customStyle="padding:10rpx;" span="6" v-if="item.orderStatus=='3'&&item.evaluateFlag=='1'">
							<u-button text="查看评价" color="#fd9472" plain size="normal" @click="evaluate(item)"
								customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
						</u-col> -->
					</u-row>
				</view>
			</view>

			<view class="goodsNull" v-else>
				<u--image src="https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/shopNull.png" customStyle="margin:auto;"></u--image>
				<u--text text="列表空空如也" align="center" color="#8991A4"></u--text>
			</view>
		</view>
		<u-popup :show="show" closeable @close="close" @open="open">
			<view class="show">
				<u--text text="取消原因" size="14" bold align="center" color="#16171C"></u--text>
				<u-radio-group v-model="cancelReason" placement="column" activeColor="#FD574A" @change="groupChange">
					<u-radio customStyle="margin-bottom: 20rpx;" v-for="(item, index) in cancelList" :key="index"
						:label="item.itemText" :name="item.itemValue" @change="cancelChange">
					</u-radio>
				</u-radio-group>
				<u-row customStyle="margin:20rpx 0;">
					<u-col span="6" customStyle="padding:0 10rpx;">
						<u-button text="确认取消" color="#07BFA5" size="normal" @click="verifyCancel"
							customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
					</u-col>
					<u-col span="6" customStyle="padding:0 10rpx;">
						<u-button text="再想想" color="#999999" size="normal" @click="close"
							customStyle="height:60rpx; line-height:60rpx; border-radius:40rpx;"></u-button>
					</u-col>
				</u-row>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import router from '@/api/router';
	import {
		orderList,
		cancelReasons,
		orderCancel,
		immediately,
		repeat
	} from "@/api/pages/goods.js"
	import {
		list
	} from "@/api/pages/address.js"
	const navbarTitle = ref("我的订单")
	const orderStatus = ref("")
	const navList = ref([{
			status: '',
			title: "全部"
		},
		{
			status: '0',
			title: "待付款"
		},
		{
			status: '1',
			title: "待发货"
		},
		{
			status: '2',
			title: "待收货"
		},
		{
			status: '3',
			title: "待评价"
		}
	])
	const goodsList = ref([])
	const address = ref({})
	const show = ref(false)
	const cancelList = ref([])
	const orderId = ref('')
	const cancelReason = ref('')
	onLoad((options) => {
		console.log("123--", options)
		orderStatus.value = options.orderStatus
		// switch (options.orderStatus) {
		// 	case '0':
		// 		navbarTitle.value = "待付款"
		// 		break;
		// 	case '1':
		// 		navbarTitle.value = "待发货"
		// 		break;
		// 	case '2':
		// 		navbarTitle.value = "待收货"
		// 		break;
		// 	case '3':
		// 		navbarTitle.value = "已完成"
		// 		break;
		// 	default:
		// 		navbarTitle.value = "全部订单"
		// }
		getOrderList()
		getAddressList({
			pageNo: 1,
			pageSize: 10
		})
	})
	// onMounted(() => {
	// 	getOrderList()
	// })
	const switchoverStatus = (status) => {
		// console.log(status);
		orderStatus.value = status
		goodsList.value = []
		getOrderList()
	}
	const orderDetails = (item) => {
		console.log("详情参数---", item);
		router.navigateTo({
			url: '/pageB/order/orderDetails?orderId=' + item.orderId
		})
	}
	const getOrderList = async () => {
		const res = await orderList({
			"orderStatus": orderStatus.value
		}).then()
		goodsList.value = res.result
		// goodsList.value ? goodsList.value = goodsList.value.concat(res.result) : goodsList.value = res
		// 	.result
		console.log(res);
	}
	const cancelOrder = (item) => {
		console.log("cancelOrder---", item)
		show.value = true
		orderId.value = item.orderId
		getCancelReasons()
	}
	const getCancelReasons = async () => {
		const res = await cancelReasons().then()
		cancelList.value = res.result
	}
	const open = () => {
		console.log('open');
	}
	const close = () => {
		show.value = false
		// console.log('close');
	}
	const groupChange = (n) => {
		console.log('groupChange', n);
		cancelReason.value = n
	}
	const cancelChange = (n) => {
		console.log('evaluateChange', n);
	}
	const verifyCancel = () => {
		console.log('verifyCancel---');
		const form = {
			orderId: orderId.value,
			cancelReason: cancelReason.value
		}
		cancvelOrdere(form)
	}
	const cancvelOrdere = async (form) => {
		const res = await orderCancel(form).then(e => {
			uni.showToast({
				title: e.message,
				icon: 'none'
			})
			getOrderList()
			close()
		})
	}
	const pay = (item) => {
		console.log(item);
		immediatelyPay(item)
	}
	const getAddressList = async (form) => {
		const res = await list(form).then()
		address.value = res.result.records[0]
	}
	const immediatelyPay = async (item) => {
		const res = await immediately({
			orderId: item.orderId
		}).then()
		if (res.code == 200) {
			uni.requestPayment({
				provider: 'wxpay', // 服务提提供商
				appId: res.result.appId,
				timeStamp: JSON.stringify(res.result.timeStamp), // 时间戳
				nonceStr: res.result.nonceStr, // 随机字符串
				package: res.result.prepayId,
				signType: 'SHA256withRSA', // 签名算法
				paySign: res.result.sign, // 签名

				success: function(ess) {
					console.log('支付成功', ess);
					// 业务逻辑。。。
					// router.navigateTo({
					// 	url: '/pageB/order/succeed',
					// })
					router.reLaunch({
						url: '/pageB/order/succeed?payForm=' + JSON.stringify({
							orderId: item.orderId,
							priceAll: item.totalAmout * 100,
							address: address.value,
							items: item.items
						})
					})
				},
				fail: function(err) {
					console.log('支付失败', err);
				}
			})
		}
	}
	const againPay = (item) => {
		console.log(item);
		repeatPay(item)
	}
	const repeatPay = async (item) => {
		const res = await repeat({
			orderId: item.orderId,
			addressId: address.value.id
		}).then()
		if (res.code == 200) {
			uni.requestPayment({
				provider: 'wxpay', // 服务提提供商
				appId: res.result.appId,
				timeStamp: JSON.stringify(res.result.timeStamp), // 时间戳
				nonceStr: res.result.nonceStr, // 随机字符串
				package: res.result.prepayId,
				signType: 'SHA256withRSA', // 签名算法
				paySign: res.result.sign, // 签名

				success: function(ess) {
					console.log('支付成功', ess);
					// 业务逻辑。。。
					// router.navigateTo({
					// 	url: '/pageB/order/succeed',
					// })
					router.reLaunch({
						url: '/pageB/order/succeed?payForm=' + JSON.stringify({
							orderId: res.result.orderId,
							priceAll: item.totalAmout * 100,
							address: address.value,
							items: item.items
						})
					})
				},
				fail: function(err) {
					console.log('支付失败', err);
				}
			})
		}
	}
	const evaluate = (item) => {
		console.log(item);
		router.navigateTo({
			url: '/pageB/order/evaluate?orderInfo=' + JSON.stringify(item)
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.u-navbar__content) {
		background: #f8f8f8;
		// background: linear-gradient(to bottom, transparent, #fff 100px),
		// 	radial-gradient(90% 500px at left top, #7aff9e, transparent),
		// 	radial-gradient(95% 500px at right top, #fff893, transparent);
	}

	:deep(.u-navbar__content__left.data-v-f631659b) {
		display: flex !important;
	}

	body {
		background: #f7f7f7;
	}

	.conent_box {
		margin-top: 0;

		.nav {
			background: #fff;
		}

		.goodsList {
			padding: 10rpx;

			.item {
				margin-bottom: 20rpx;
				padding: 20rpx;
				border-radius: 40rpx;
				box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
				background: #fff;
			}
		}

		.goodsNull {
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 40rpx;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
			background: #fff;
		}
	}
</style>